<template>
    <div >
        <div class="top">
            <div class="top-left fl">
                <img src="../../assets/images/headerIcon.png" alt="">
            </div>
            <div class="top-right fl">
                <div class="name">陈骏涛</div>
                <div class="text"><span>性别：男</span> 出生日期：19500317</div>
            </div>
        </div>
        <div class="main">
            <div class="list-title">
                <div class="item " v-for="i in 2" :key="i">
                    <div class="item-top">
                        <div class="title">中山医院 呼吸内科</div>
                        <div class="date">
                            2018年11月2日放射报告
                        </div>
                    </div>
                    <div class="text">
                        <p><span>报告时间：</span>2018/10/04 13:15:00</p>
                        <p><span>影像号：</span>1035740704</p>
                        <p><span>住院号：</span>77998</p>
                        <p><span>门诊号：</span>778</p>
                    </div>
                </div>
            </div>
            <div class="list" >
                <div class="item" v-for="i in 8" :key="i">
                    <div class="title"><span></span> 影像诊断</div>
                    <div class="text">肺MT病例，两肺渗出伴两肺节段性不张,双侧胸腔积水(左侧为著）较18-10-20片稍好转，请随访。</div>
                </div>
                
            </div>
        </div>
        <!-- 数据仅供参考提示，hosName通过接口获得，在该组件赋值传给子组件，首页不需要传值，默认为空 -->
        <tips :hosName="hosName"></tips>
        <!-- 水印 -->
        <div class="watermark"></div>
    </div>
</template>

<script>
import tips from '@/components/tips.vue'
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      hosName:''//医院名称
    }
  },
  components:{
        tips
    },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.fl{
    float: left;
}
.fr{
    float: right;
}
.top{
    overflow: hidden;
    background:rgba(255,255,255,0.5);
    width: 24rem;
    height: 6rem;
    border-radius:1rem;
    margin:3rem auto;
    padding:2rem;
    .top-left{
        width: 5rem;
        height: 5rem;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 1rem;
        img{
            width: 100%;
        }
    }
    .name{
        font-size: 1.3rem;
        color:#333;
    }
    .text{
        font-size: 1rem;
        color:#666;
    }
    span{
        // margin-right:0.5rem;
    }
}
.list-title{
    padding:1rem;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    .item{
        width:50%;
        border-radius:1rem;
        background: #fff;
        overflow: hidden;
        
        .item-top{
            padding: 1rem;
            background: linear-gradient(-40deg,rgba(255,171,61,1),rgba(252,195,119,1));
            color:#fff;
            .title{
                font-size: 1.3rem;
                
            }
            .date{
                font-size: 1rem;
            }
        }
        .text{
            padding:1rem;
        }
        
    }
    .item:nth-child(even){
        margin-left:1rem;
        .item-top{
            background:linear-gradient(-29deg,rgba(120,208,227,1),rgba(68,165,247,1));
        }

    }
}
.list{
    padding:1rem;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    flex-wrap:wrap;
    .item{
        width:48%;
        border-radius:1rem;
        background: #fff;
        overflow: hidden;
        margin-bottom:1rem;
        .title{
            font-size: 1.3rem;
            margin-top:1rem;
            color:#FF9000;
            span{
                display: inline-block;
                width: 0.3rem;
                height:1rem;
                background: linear-gradient(-40deg,rgba(255,171,61,1),rgba(252,195,119,1));
                vertical-align: middle;
            }
        }
        .text{
            padding:1rem;
            color: #666;
            font-size: 1rem;
        }
        
    }
    .item:nth-child(even){
        .title{
            color:#009CDF;
            span{
                width:0.3rem;
                background:linear-gradient(-29deg,rgba(120,208,227,1),rgba(68,165,247,1));
            }
            
        }

    }
}
</style>
